<template>
    <div class="template">
        <el-container class="outer-container">
            <el-container class="inner-container">
                <el-aside width="320px">
                    <div>
                        <!-- 修改头像 -->
                        <!-- <el-upload class="avatar-uploader" action="http://localhost:8082" :show-file-list="false"
                            :on-change="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers"
                            name="file">
                            
                        </el-upload> -->
                        <div class="avatar-uploader">
                            <img :src="imgDeaulft" />
                        </div>
                        <!-- 修改头像按钮 -->
                        <el-button class="avatar" @click="dialogFormVisibleA = true">修改头像</el-button>
                        <!-- 修改弹框 -->
                        <div class="clearfix avatarheight">
                            <el-dialog title="选择头像" :visible.sync="dialogFormVisibleA">
                                <div class="a1 clearfix">
                                    <el-form :model="form" v-for="(v, item) in imageUrls" :key="item"
                                        class="imgFloat clearfix">
                                        <img :src="imageUrls[item]" alt="" @click="changeImg(item)" />
                                    </el-form>
                                </div>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisibleA = false">取 消</el-button>
                                    <el-button type="primary" @click="confirmImg">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                    <!-- 修改登录信息 -->
                    <div class="upload">
                        <div :style="{
                            width: '150px',
                            height: '150px',
                            border: '1px dashed',
                            borderRadius: '10px',
                            overflow: 'hidden'
                        }">
                            <div :style="{ width: '15px', height: '15px', float: 'left', backgroundColor: v.color }"
                                v-for="v in imgArr"></div>
                        </div>
                        <el-button class="modify" @click="toEditUser">修改登录</el-button>
                    </div>


                </el-aside>
                <el-container>
                    <!-- 查询按钮 -->
                    <el-header>
                        <el-row :gutter="14">
                            <el-col :span="8">
                                <div class="grid-content">
                                    <el-input v-model="searchInput" placeholder="请输入内容"></el-input>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">
                                    <el-button @click="searchSet">查询</el-button>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">
                                    <el-button @click="reSet">重置</el-button>
                                </div>
                            </el-col>
                            <el-col :span="3" v-if="power == '大人'">
                                <el-button @click="deleteRow">批量删除</el-button>
                            </el-col>
                        </el-row>
                    </el-header>
                    <el-main>
                        <!-- 表格 -->
                        <el-table ref="multipleTable" :data="stateName" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange">

                            <el-table-column type="selection" width="55"> </el-table-column>

                            <el-table-column prop="name" label="用户" width="210">  </el-table-column>

                            <el-table-column prop="height" label="身高" width="210"></el-table-column>

                            <el-table-column prop="weight" label="体重" width="210"></el-table-column>
                            
                            <el-table-column prop="state" label="状态" width="210"></el-table-column>

                            
                            <el-table-column prop="type" label="身份信息" width="210"></el-table-column>
                    
                            
                            
                        </el-table>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data() {
        return {
            headers: {
                "Content-Type": "multipart/form-data",
            },
            power: '',
            asssss:[
                {name:'wwww',height:'180',weight:'70',state:'dddd',type:'ghj',power:'cvvv',work:'ghj'},
                {name:'wwww',height:'180',weight:'70',state:'dddd',type:'ghj',power:'cvvv',work:'ghj'},
                {name:'wwww',height:'180',weight:'70',state:'dddd',type:'ghj',power:'cvvv',work:'ghj'},
                {name:'wwww',height:'180',weight:'70',state:'dddd',type:'ghj',power:'cvvv',work:'ghj'},
                {name:'wwww',height:'180',weight:'70',state:'dddd',type:'ghj',power:'cvvv',work:'ghj'},
                {name:'wwww',height:'180',weight:'70',state:'dddd',type:'ghj',power:'cvvv',work:'ghj'}
            ],
            imageUrls: [
                "https://img0.baidu.com/it/u=628108590,3048761661&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img1.baidu.com/it/u=1982684582,3167534176&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img2.baidu.com/it/u=4257288502,1001556095&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img2.baidu.com/it/u=2008059653,3390417037&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                "https://img0.baidu.com/it/u=3640813674,2215847959&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img0.baidu.com/it/u=1924545074,990734016&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img2.baidu.com/it/u=1524038174,398033451&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
                "https://img2.baidu.com/it/u=5732884,2040772777&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img2.baidu.com/it/u=2707157376,2380402659&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200",
                "https://img.duoziwang.com/2020/01/03212017704705.jpg",
                "https://img1.baidu.com/it/u=248667107,336222080&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img0.baidu.com/it/u=1981515746,748289321&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img0.baidu.com/it/u=3548581751,2018920472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                "https://img.touxiangwu.com/uploads/allimg/2021082611/mesxq35ntot.gif",
                "https://img1.baidu.com/it/u=3180720746,1962811203&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
                "https://img0.baidu.com/it/u=1072599586,213378113&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
                "https://img2.baidu.com/it/u=2786127014,595786906&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200",
                "https://img2.baidu.com/it/u=1809711151,2735109200&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
            ],
            item: 0,
            dialogImageUrl: "",
            dialogFormVisibleA: false,
            dialogVisible: false,
            disabled: false,
            fileList: [],
            dialogImageUrl: "",
            dialogVisible: false,
            disabled: false,
            imgDeaulft: '',
            multipleSelection: '',
            memberData: [], //成员近况
            searchInput: "",
            dialogFormVisible: false,
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            formLabelWidth: "120px",
            imgArr: [],
        };
    },

    mounted() {
        this.rander();
        sessionStorage.getItem(
            "newAvataritem",
            Number((this.item = (this.item + 1) % this.imageUrls.length))
        );
        this.item = sessionStorage.getItem(
            "newAvataritem",
            Number((this.item = (this.item + 1) % this.imageUrls.length))
        );
        let id = sessionStorage.getItem('userId')
        axios({ url: '/dbdata/user/' + id + '' }).then(({ data }) => {
            return axios({ url: data.img }).then(({ data }) => {
                if (data.img) {
                    this.imgArr = data.img;
                } else {
                    this.imgArr = data;
                }
            })
        }).then(() => {
            axios({ url: '/dbdata/userTalk/' + id + '' }).then(({ data }) => {
                this.imgDeaulft = data.avatar
            })
        })
        let power = sessionStorage.getItem('userType')
        this.power = power;
    },
    computed:{
        stateName(){
            return this.memberData
        }
    },
    methods: {
        confirmImg() {
            let id = sessionStorage.getItem('userId')
            this.dialogFormVisibleA = false;
            axios.patch('/dbdata/userTalk/' + id + '', { avatar: this.imageUrls[this.item] }).then(() => {
                this.$router.go(0)
            })
        },
        toEditUser() {
            this.$router.push('/editUser')
        },
        handleAvatarSuccess(res, file) {
            console.log(111, res);
            console.log(112, file);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg" || "image/png";
            const isLt30M = file.size / 1024 / 1024 < 30;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 或者png格式!");
            }
            if (!isLt30M) {
                this.$message.error("上传头像图片大小不能超过 30MB!");
            }
            return isJPG && isLt30M;
        },
        handleRemove(file) {
            console.log(file);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val[0].id;
        },
        handleRemove(file) {
            console.log(file);
        },
        rander() {
        axios({
                url: "/dbdata/keedaka",
            }).then(({ data }) => {
                this.memberData=data;
            }).then(()=>{axios({
                url: "/dbdata/user",
            }).then(({ data }) => {
                for (let i = 0; i < data.length; i++) {
                        this.memberData[i].name = data[i].name;
                    this.memberData[i].type = data[i].type;
                    console.log(this.memberData[i]);
                }
            })})
        },
        //查询
        // async searchSet(){
        //     await axios({
        //         url:"/dbdata/user",
        //         data:{
        //             search:this.searchInput,
        //         }
        //     }).then(({data})=>{
        //         let searchArr=[]
        //         for(let i=0;i<data.length;i++){
        //             // this.memberData[i]=data.name
        //             // console.log(111,data[i].name);
        //             if(data[i].name.includes(this.searchInput)){
        //                 this.searchArr.push(data[i].name);
        //                 this.searchInput=''
        //             }
        //         }
        //     });
        // },
        searchSet() {
            if (this.searchInput == '') {
                return this.rander();
            } else {
                let matchingMembers = [];
                for (let i = 0; i < this.memberData.length; i++) {
                    if (this.memberData[i].name == this.searchInput) {
                        matchingMembers.push(this.memberData[i]);
                    }
                }
                return this.memberData = matchingMembers;
            }

        },
        //删除
        deleteRow() {
            for (let i = 0; i < this.memberData.length; i++) {
                if (this.memberData[i].id === Number(this.multipleSelection)) {
                    this.memberData.splice(i, 1);
                }
            }
        },

        //重置
        async reSet() {
            this.memberData = [];
            await this.rander();
            this.searchInput = "";
        },
        //切换图片
        changeImg(item1) {
            sessionStorage.setItem(
                "newAvataritem",
                String((this.item = (this.item + 1) % this.imageUrls.length))
            );
            this.item = item1
            this.imgDeaulft = this.imageUrls[item1]
        },


    },
};
</script>

<style  lang="less">
.template,
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.el-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.el-header {
    // background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;

    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .grid-content {
        border-radius: 4px;
        // min-height: 36px;
    }

    .hidden {
        display: none;
    }
}

.el-aside {
    // background-color: #D3DCE6;
    color: #333;

    .el-dialog {
        height: 700px;

        .a1 {
            height: 400px;
        }
    }


    .upload {
        position: absolute;
        top: 300px;
        left: 80px;
    }

    .avatar-uploader {
        margin-top: 20px;

        img {
            width: 148px;
            height: 148px;
        }
    }

    .imgFloat {
        float: left;

        img {
            float: left;
            width: 100px;
            height: 100px;
            margin-left: 40px;
            margin-bottom: 20px;
        }
    }

    .avatar {
        position: absolute;
        top: 200px;
        left: 110px;
    }

    .modify {
        position: absolute;
        top: 180px;
        left: 20px;
    }
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    // text-align: center;
}

body>.el-container {
    margin-bottom: 0;
}

// .outer-container .el-container .el-aside {
//     // line-height: 320px;
// }

.el-button {
    width: 100px;
    background-color: rgb(255, 233, 192);
    color: rgba(00, 00, 00, 0.8);
    border-color: rgb(255, 233, 192);

    &:hover {
        background-color: rgba(255, 233, 192, 0.8);
        color: rgba(00, 00, 00, 0.5);
        border-color: rgba(255, 233, 192, 0.8);
    }
}
</style>
